<template>
  <div>
    <div class="mblog">
      <h2> {{ blog.title }}</h2>
	  <div  v-if="ownBlog">
		  <el-link icon="el-icon-edit">
			<router-link :to="{name: 'BlogEdit', params: {blogId: blog.id}}" >编辑</router-link>
		  </el-link>
		  <el-divider direction="vertical"></el-divider>
		  <el-link @click="deleteById()">删除<i class="el-icon-view el-icon--right"></i> </el-link>
		  <el-divider></el-divider>
	  </div>

      <div class="markdown-body" v-html="blog.content" v-loading="blog.id==''"></div>
    </div>
  </div>
</template>
<script>
  import 'github-markdown-css'
  import Header from "../components/Header";
  import Company from "../components/Company.vue"
  export default {
    name: "BlogDetail.vue",
    data() {
      return {
        blog: {
          id: "",
          title: "",
          content: ""
        },
        ownBlog: false
      }
    },
    created() {
		this.init()
    },
	methods:{
		init(){
			const blogId = this.$route.params.blogId
			console.log(blogId)
			const _this = this
			this.$axios.get('/blog/' + blogId).then(res => {
			  const blog = res.data.data
			  _this.blog.id = blog.id
			  _this.blog.title = blog.title
			  var MardownIt = require("markdown-it")
			  var md = new MardownIt()
			  var result = md.render(blog.content)
			  _this.blog.content = result
			  _this.ownBlog = (blog.userId === _this.$store.getters.getUser.id)
			})
		},
		deleteById(){
			 this.$confirm('此操作将永久删除文章, 是否继续?', '删除文章', {
			          confirmButtonText: '确定',
			          cancelButtonText: '取消',
			          type: 'warning'
			        }).then(() => {
						let _this = this;
						this.$axios.post('/blog/delete/' + _this.blog.id).then(res => {  
							_this.$message({
							  message: "删除成功",
							  type: 'success'
							});
							_this.$router.push({path:"/blogs"});
						}) 
			        }).catch(() => {
			          this.$message({
			            type: 'info',
			            message: '已取消删除'
			          });          
			        }); 
		}
	}
  }
</script>

<style scoped>
  .mblog {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    width: 100%;
    min-height: 700px;
    padding: 20px 15px;
  }
  
  .markdown-body{
	  min-height: 400px;
  }

</style>